<section id="projectConfigIndex">
  <div class="projectConfig-menu">
		<div class="pc-list-ul">
			<div class="pc-list-li cursor" @click="tab(item)" v-for="(item, index) in menuList" :class="{'pc-active': item.name == active}">{{ item.name }}</div>
		</div>
		<div class="project-name" ref="projectName">项目: {{ projectName }}</div>
  </div>
	<div class="projectConfig-wrap"></div>
</section>

<script src="modules/projectConfig/scripts/index.js" charset="utf-8"></script>

<style media="screen">
  .projectConfig-menu {
    display: flex;
		height: 56px;
		background-color: #F7F7F7;
		justify-content: space-between;
  }
	.pc-list-ul {
		width: 75%;
		display: flex;
	}
	.pc-list-li {
		flex: 1;
		text-align: center;
		line-height: 56px;
	}
	.pc-active {
		color: #565E99;
		position: relative;
	}
	.pc-active:before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		height: 4px;
		background-color: #565E99;
		width: 100%;
	}
	.project-name {
		line-height: 56px;
		padding-right: 15px;
	}
</style>
